<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="商品名称" prop="goods_title">
					<el-input v-model="state.queryParams.goods_title" clearable placeholder="请输入商品名称" />
				</el-form-item>
				<el-form-item label="关联供应商" prop="supplier_id">
					<el-select
						v-model="state.queryParams.supplier_id"
						clearable
						placeholder="请输入关键字/选择供应商"
						filterable
						remote
						:remote-method="supplierIdRemoteMethod"
						remote-show-suffix
						:loading="state.supplierIdSelect.loading"
						@focus="onSupplierIdFocus"
					>
						<el-option v-for="item in state.supplierIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="用户ID" prop="user_id">
					<el-input v-model="state.queryParams.user_id" @input="onVerifiyNumberIntegerUserId" clearable placeholder="请输入用户ID" />
				</el-form-item>
				<el-form-item label="用户昵称" prop="user_nickname">
					<el-input v-model="state.queryParams.user_nickname" clearable placeholder="请输入用户昵称" />
				</el-form-item>
				<el-form-item label="申请售后时间" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="datetimerange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
						:default-time="state.defaultTime"
					/>
				</el-form-item>
				<el-form-item label="子订单号" prop="order_detail_no">
					<el-input v-model="state.queryParams.order_detail_no" clearable placeholder="请输入子订单号" />
				</el-form-item>
				<el-form-item label="售后单号" prop="order_after_no">
					<el-input v-model="state.queryParams.order_after_no" clearable placeholder="请输入售后单号" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="state.queryParams.remark" clearable placeholder="请输入备注" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-tabs v-model="state.queryParams.type">
				<el-tab-pane label="全部订单" :name="0" />
				<el-tab-pane label="待审核" :name="1" />
				<el-tab-pane label="待买家处理" :name="2" />
				<el-tab-pane label="待卖家处理" :name="3" />
				<el-tab-pane label="已完成" :name="4" />
			</el-tabs>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="订单号" align="center" prop="order" width="248">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								子订单号：{{ row.order_detail_no }}<br />
								售后单号：{{ row.order_after_no }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="商品主图" align="center" prop="thumb">
					<template #default="{ row }">
						<el-avatar :src="row.order_detail_info.goods_thumb" shape="square" />
					</template>
				</el-table-column>
				<el-table-column label="商品名称" align="center" prop="goods_title" />
				<el-table-column label="用户信息" align="center" prop="user" width="212">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								用户ID：{{ row.user_id }}<br />
								用户昵称：{{ row.user_name }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="商品信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								商品规格：{{ row.option_name }}<br />
								售价：{{ row.order_detail_info.sale_price }}<br />
								购买数量：{{ row.order_detail_info.total_num }}<br />
								总售价：{{ row.order_detail_info.total_amt }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="供货信息" align="center" prop="good_info" width="150">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								供应商：{{ row.supplier_name }}<br />
								供货单价：{{ row.order_detail_info.cost_price }}<br />
								供货总价：{{ row.order_detail_info.supplier_amt }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="订单信息" align="center" prop="order_info" width="200">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								运费：{{ Number(row.order_detail_info.trans_amt) ? row.order_detail_info.trans_amt : '包邮' }}<br />
								支付金额(含运费)：{{ row.order_detail_info.pay_amt }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="售后信息" align="center" prop="order_info" width="200">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								售后类型：{{ formatterAfterType(row) }}<br />
								售后状态：{{ formatterAfterState(row) }}<br />
								<template v-if="row.refund_type && row.refund_type !== 3"> 退款状态：{{ formatterRefundStatus(row) }}<br /> </template>
								<template v-if="row.remark">
									备注：<el-popover v-if="row.remark" placement="top" title="备注" :width="200" trigger="hover" :content="row.remark">
										<template #reference>
											<el-button type="primary" link>查看</el-button>
										</template>
									</el-popover>
								</template>
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" @click="onOrderAfterRecords(row)" link>查看售后记录</el-button>
						<el-button type="primary" v-if="isOrderAfter(row)" @click="onOrderAfterAudit(row)" link>审核</el-button>
						<el-button type="primary" v-if="isOrderAfter(row)" @click="onOrderAfterRemark(row)" link>备注</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<OrderAfterAuditDialog ref="orderAfterAuditDialogRef" />
		<OrderAfterAuditDialog1 ref="orderAfterAuditDialog1Ref" />
		<OrderAfterRecordsDialog ref="orderAfterRecordsDialogRef" />
	</div>
</template>

<script setup lang="ts" name="afterSale">
import { ElMessage, ElMessageBox } from 'element-plus';
import { defineAsyncComponent, inject, onMounted, reactive, ref, watch } from 'vue';
import { goodsApi, orderApi } from '/@/api';
import { verifiyNumberInteger1 } from '/@/utils/toolsValidate';

const OrderAfterAuditDialog = defineAsyncComponent(() => import('./dialog/orderAfterAuditDialog.vue'));
const OrderAfterAuditDialog1 = defineAsyncComponent(() => import('./dialog/orderAfterAuditDialog1.vue'));
const OrderAfterRecordsDialog = defineAsyncComponent(() => import('./dialog/orderAfterRecordsDialog.vue'));

const Dayjs: any = inject('dayjs');
const GoodsApi = goodsApi();
const OrderApi = orderApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		goods_title: '',
		supplier_id: '',
		user_id: '',
		user_nickname: '',
		time: [],
		order_detail_no: '',
		order_after_no: '',
		remark: '',
		type: 0,
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	supplierIdSelect: {
		loading: false,
		options: [] as any,
	},
	defaultTime: [
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 0, 0, 0),
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 23, 59, 59),
	],
});
const queryFormRef = ref();
const orderAfterAuditDialogRef = ref();
const orderAfterAuditDialog1Ref = ref();
const orderAfterRecordsDialogRef = ref();

onMounted(() => {
	getList();
});

watch(
	() => state.queryParams.type,
	() => onQuery()
);

/********** 触发事件 **********/
// 关联供应商获取焦点
const onSupplierIdFocus = () => {
	if (state.queryParams.supplier_id) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10 });
};
// 用户ID过滤
const onVerifiyNumberIntegerUserId = (val: string) => {
	state.queryParams.user_id = verifiyNumberInteger1(val);
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 查看售后记录
const onOrderAfterRecords = (row: any) => {
	orderAfterRecordsDialogRef.value.openDialog(row);
};
// 审核
const onOrderAfterAudit = (row: any) => {
	switch (row.after_type) {
		case 1:
			orderAfterAuditDialogRef.value.openDialog(row, () => getList());
			break;
		case 2:
			if (row.one_after_status === 2) {
				orderAfterAuditDialogRef.value.openDialog(row, () => getList());
			} else {
				orderAfterAuditDialog1Ref.value.openDialog(row, () => getList());
			}
			break;
	}
};
// 备注
const onOrderAfterRemark = (row: any) => {
	ElMessageBox.prompt('', `「${row.order_after_no}」售后备注`, {
		inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
		inputPlaceholder: '请输入售后备注',
		inputErrorMessage: '售后备注不能为空',
	})
		.then(({ value }) => {
			_orderAfterRemark({ order_after_id: row.id, remark: value });
		})
		.catch(() => {});
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_orderAfterList({
		...state.queryParams,
		start_time: state.queryParams.time ? state.queryParams.time[0] : '',
		end_time: state.queryParams.time ? state.queryParams.time[1] : '',
	});
};
// 关联供应商搜索选择
const supplierIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10, title: query });
};
// 售后类型字典
const formatterAfterType = (row: any) => {
	switch (row.after_type) {
		case 1:
			return '仅退款';
		case 2:
			return '退货退款';
		default:
			return '未知错误';
	}
};
// 售后状态
const formatterAfterState = (row: any) => {
	if (row.is_cancel) return '已取消';
	switch (row.state) {
		case 0:
			return '待审核';
		case 1:
			switch (row.after_type) {
				case 1:
					return '已完成';
				case 2:
					switch (row.two_after_status) {
						case 0:
							return '待买家处理';
						case 1:
							return '待卖家处理';
						case 2:
						case 3:
							return '已完成';
						default:
							return '未知错误';
					}
				default:
					return '未知错误';
			}
		case 2:
			return '已完成';
		default:
			return '未知错误';
	}
};
// 退款状态
const formatterRefundStatus = (row: any) => {
	switch (row.refund_status) {
		case 0:
			return '未退款';
		case 1:
			return '退款中';
		case 2:
			return '退款成功';
		case 3:
			return '退款失败';
		default:
			return '未知错误';
	}
};
// 是否处理售后
const isOrderAfter = (row: any) => {
	switch (row.state) {
		case 0:
			return true;
		case 1:
			switch (row.after_type) {
				case 1:
					return false;
				case 2:
					switch (row.one_after_status) {
						case 2:
							switch (row.two_after_status) {
								case 1:
									return true;
								default:
									return false;
							}
						default:
							return false;
					}
				default:
					return false;
			}
		default:
			return false;
	}
};

/********** 网络事件 **********/
// 选择供应商
const _goodsSelectSupplier = (params: Object) => {
	state.supplierIdSelect.loading = false;
	GoodsApi.goodsSelectSupplier(params)
		.then((res) => {
			state.supplierIdSelect.options = res.data.list;
		})
		.catch(() => (state.supplierIdSelect.loading = false));
};
// 售后列表
const _orderAfterList = (params: Object) => {
	OrderApi.orderAfterList(params)
		.then((res) => {
			state.tableList = res.data.list.map((item: any) => {
				return {
					...item,
					order_detail_info: item.order_detail_info[0],
				};
			});
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 添加备注
const _orderAfterRemark = (params: Object) => {
	OrderApi.orderAfterRemark(params).then(() => {
		ElMessage.success('操作成功！');
		getList();
	});
};
</script>
